<template>
    <div>
        <div class="_main" v-if="isShow"><no-right/></div>
        <h2 class="_title" v-if="!isShow">
            <span class="mr">组织名称：{{ form.organizationname }}</span>
            <span class="mr">负责人：{{ form.username }}</span>
            <span>电话：{{ form.phone }}</span>
        </h2>
        <el-tabs v-model="userType" @tab-click="handleClick" v-if="!isShow">
            <el-tab-pane label="学生概况" name="1">
                <tableComponents ref='tableComponents1' :type="1" />
            </el-tab-pane>
            <el-tab-pane label="职工概况" name="2" v-if="store.state.roleid != 1006">
                <tableComponents ref='tableComponents2' :type="2" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import store from '@/store'
import tableComponents from './table.vue'

export default {
    components: {
        tableComponents
    },
    data() {
        return {
            store,
            isShow: false,
            userType: '1', //  ,1代表学生、2职工、3访客
            form: {}
        }
    },
    created() {
        this.query()
    },
    methods: {
        query() {
            this.$http('medicalhandover/adress', { userid: store.state.user.userid }).then(({ data, code }) => {
                if (code == 200) {
                    this.form = data
                    this.isShow = false
                } else {
                    this.isShow = true
                }
            })
        },
        handleClick(tab, event) {
            this.userType = tab.name
        }
    }
}
</script>

<style lang="less" scoped>
  /deep/ .el-tabs__item {
      color: #fff;
  }

  /deep/ .el-tabs__nav-wrap::after {
      height: 0px;
  }

  /deep/ .el-tabs__active-bar {
    background-color: transparent;
  }

  /deep/ .el-tabs__item:hover,
  /deep/ .is-active {
      color: #4353da;
  }

  .mr {
      margin-right: 30px;
  }

  ._title {
      span {
          color: #fff;
          font-size: 14px;
      }
  }

  /deep/ .el-tabs__header {
    margin: 30px 0;
  }
</style>